<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>菜单管理</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="../../js/jquery.js"></script>
<script src="../../js/underscore-min.js"></script>
<script src="../../js/bootstrap/js/bootstrap.js"></script>
<link href="../../js/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../../js/bootstrap/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../css/MyCss.css" />
<script src="../../js/DataTables/js/jquery.dataTables.hxqc.js"></script>
<link href="../../js/DataTables/css/dataTables.bootstrap.css"
	rel="stylesheet">
<script src="../../js/DataTables/js/dataTables.bootstrap.js"></script>
<!--自定义样式 及 公共js--->
<link href="../../css/public.css" rel="stylesheet">
<script src="../../js/public.js"></script>
<body>
	<!--内容页开始 -->
	<div class="container-fluid">

		<!--表单框架-->
		<form class="form-horizontal" id="test">
			<div class="form_area">
				<div class="form_head">
					<div class="row">
						<div class="col-sm-9">
							<span class="title">添加菜单</span>
						</div>
						<div class="col-sm-3"></div>
					</div>
				</div>
				<!--表格体-->
				<div class="form_body" style="padding: 15px 10px;margin-left: 100px;">
					<p class="bg-warning" id="msg"
						style="height: 40px; line-height: 40px; color: red; text-align: center; display: none;"></p>
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<div class="input-group">
									<div class="row">
										<div class="form-group">
											<div class="input-group">
												<label class="input-group-addon"><span
													style="color: red;">*</span>菜单名称:</label> <input
													class="form-control" type="text" title="请输入菜单名称" style="width: 300px;"
													id="right_name" placeholder="请输入菜单名称">
											</div>
										</div>
									</div>

									<div class="row">
										<div class="form-group">
											<div class="input-group">
												<label class="input-group-addon"><span
													style="color: red;">*</span>菜单地址:</label> <input
													class="form-control" type="text" title="请输入菜单地址" style="width: 300px;"
													id="access_value" placeholder="请输入菜单地址">


											</div>
										</div>
									</div>

									<div class="row">
										<div class="form-group">
											<div class="input-group">
												<label class="input-group-addon"><span
													style="color: red; visibility: hidden;">*</span>图标样式:</label> <input style="width: 300px;"
													class="form-control" type="text" id="right_icon"
													placeholder="如：icon-laptop">


											</div>
										</div>
									</div>


									<div class="row">
										<div class="form-group">
											<div class="input-group">
												<label class="input-group-addon"><span
													style="color: red;">*</span>排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序:</label>
												<input class="form-control" type="text" title="请输入数字" style="width: 300px;"
													value="0" id="sort_id" placeholder="请输入数字" />
											</div>
										</div>
									</div>

									<div class="row">
										<div class="form-group">
											<div class="input-group">
												<label class="input-group-addon" ><span
													style="color: red;">*</span>菜单级别:</label>
													 <select id="parent_id"  style="height: 38px;width: 300px;" 
													class="form-control">
													<option value="0">顶级菜单</option>
												</select>
												
											</div>
										</div>
									</div>
									
									<div class="row" id="type_div" style="display: none;">
										<div class="form-group">
											<div class="input-group">
												<label class="input-group-addon" ><span
													style="color: red;">*</span>菜单类型:</label>
													 <select id="access_type"  style="height: 38px;width: 300px;" 
													class="form-control">
													<option value="1">菜单</option>
													<option value="2">按钮</option>
												</select>
												
											</div>
										</div>
									</div>
								

									<div class="row">
										<div class="form-group">
											<div class="input-group">
												<label class="input-group-addon"><span
													style="color: red; ">*</span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</label>  
													<label  style="height: 38px;width: 300px;text-align: left;" class="input-group-addon" ><input type="radio" 
													name="status" checked="checked" value="1">启用 <input
													type="radio" name="status" value="0">
													停用
												</label>
											</div>
										</div>
									</div>


									<div class="row" style="text-align: center; padding-top: 10px">
										<label class="input-group-btn">
											<button type="button" class="btn btn-primary" id="add_btn"
												style="width: 120px; margin-left: 80px">提交</button>
											<button type="button" class="btn btn-default"
												onclick="GLOBAL.OpenUrl('/page/menu/menu.html','菜单管理');"
												style="width: 120px; margin-left: 30px">返回</button>
										</label>
									</div>

								</div>
							</div>

						</div>

					</div>
				</div>
			</div>
		</form>
	</div>

	<!--内容页结束-->
	<script>
		$(document)
				.ready(
						function() {
							
							//加载项目
							$
									.post(
											GLOBAL.ctx+'/menu/findRights',
											{status:"1",access_type:"0"},
											function(rights) {
												for (var i = 0; i < rights.length; i++) {
													var style = "";
													if (rights[i].parent_id == '0')
														style = "color: blue;";
													else
														style = "margin-left:20px;"
													$(
															"<option  style='"+style+"' value='"
													+ rights[i].right_id + "'  >"
																	+ rights[i].right_name
																	+ "</option>")
															.appendTo(
																	$("#parent_id"));

												}

											}, "json");

							var timeout;
							function showMsg(msg) {
								$("#msg").html(msg);
								$("#msg").show();
								if (timeout != undefined)
									clearTimeout(timeout);
								timeout = setTimeout(function hiddenMsg() {
									$("#msg").html("");
									$("#msg").hide();
								}, 5000);
							}

							$("#add_btn")
									.click(
											function() {
												var right_name = $(
														"#right_name").val();
												var access_value = $(
														"#access_value").val();
												var access_type = $("#access_type").val();
												var parent_id = $("#parent_id")
														.val();
												var sort_id = $("#sort_id")
														.val();
												var right_icon = $(
														"#right_icon").val();

												var status = $(
														'input[name="status"]:checked ')
														.val();

												if (right_name.length<2||right_name.length>50) {
													showMsg("请输入2-50位长度的菜单名称!");
													$("#right_name").focus();
													return;
												}
												if (access_value == ""
														|| access_value.length > 255) {
													showMsg("菜单地址不能为空且不超过255个字符!");
													$("#access_value").focus();
													return;
												}
												if (!_.isNumber(parseInt(sort_id))) {
													showMsg("排序值必须为6位以下数字!");
													$("#sort_id").focus();
													return;
												}

												$
														.post(
																GLOBAL.ctx+"/menu/addMenu",
																{
																	"right_name" : right_name,
																	"access_value" : access_value,
																	"parent_id" : parent_id,
																	"sort_id" : sort_id,
																	"status" : status,
																	"right_icon" : right_icon,
																	"access_type" : access_type
																},
																function(data) {
																	if (data.optFlag == 'Y') {
																		alert("添加成功!");
																		history
																				.go(-1);
																	} else {
																		showMsg(data.optDesc);
																	}
																}, "json");

											});
							
							
							$("#parent_id").change(function(){
								if(this.value!='0'){
									$("#type_div").show();
								}else{
									$("#type_div").hide();
								}
							});

						});
	</script>
</body>
</html>
